<!-- EditUnMerge.vue -->
<template>
  <div class="container">
    <!-- 面包屑导航 -->
    <div class="topNav">
      <el-breadcrumb :separator-icon="ArrowRight">

        <el-breadcrumb-item>
          <span v-if="code">编辑拆卸单</span>
          <span v-else>新增拆卸单</span>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="together-content">
      <!-- 基本信息 -->
      <el-form :inline="true" label-width="auto" style="width: 100%">
        <el-form-item label="单据编号">
          <el-input v-model="formData.code" readonly style="width: 180px" />
        </el-form-item>
        <el-form-item label="拆卸日期">
          <el-date-picker v-model="formData.mergeDate" type="date" placeholder="选择日期" value-format="YYYY-MM-DD"
            style="width: 180px" />
        </el-form-item>

        <el-form-item label="拆卸费用">
          <el-input readonly placeholder="" style="width: 180px" />
        </el-form-item>
      </el-form>

      <!-- 操作按钮 -->
      <div style="margin-bottom: 15px; text-align: right">
        <el-button type="primary" size="small" @click="saveDraft">保存草稿</el-button>
        <el-button type="success" size="small" @click="submitForApproval">保存并提交</el-button>
        <el-button type="info" size="small" @click="audit">审核</el-button>
        <el-button type="info" size="small" @click="unAudit">反审核</el-button>
      </div>

      <!-- 模板操作 -->
      <el-checkbox v-model="checked1" label="自动分摊" size="small" style="margin-right: 10px;" />

      <el-button size="small" @click="selectTemplate">选择模板</el-button>
      <el-button size="small" @click="saveAsTemplate">存为模板</el-button>
      <el-button size="small" @click="updateTemplate">更新模板</el-button>
      <br /><br />

      <!-- 商品信息展示 -->
      <div style="margin-bottom: 0.5rem">
        <span style="font-size: 0.7rem; font-weight: bold;">拆卸件：</span>
        <span style="margin-left: 2rem; font-size: 0.8rem">
          模版编号:{{}} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;模版名称:{{ }}
        </span>
      </div>
      <el-table :data="mergeArr" style="width: auto" border>
        <el-table-column label="商品" width="160" align="center">
          <template #default>
            <el-input readonly size="small" placeholder="选择商品" style="width: 95%" />
          </template>
        </el-table-column>
        <el-table-column label="商品类别" width="140" align="center">
          <template #default>
            <el-input size="small" style="width: 95%" disabled />
          </template>
        </el-table-column>
        <el-table-column label="规格" width="140" align="center">
          <template #default>
            <el-input size="small" style="width: 95%" disabled />
          </template>
        </el-table-column>
        <el-table-column label="单位" width="160" align="center">
          <template #default>
            <el-input readonly style="width: 80%" />
          </template>
        </el-table-column>
        <el-table-column label="仓库" width="160" align="center">
          <template #default>
            <el-input readonly placeholder="选择仓库" />
          </template>
        </el-table-column>
        <el-table-column label="可用库存" width="160" align="center">
          <template #default>
            <el-input readonly placeholder="选择仓库" />
          </template>
        </el-table-column>
        <el-table-column label="数量" width="160" align="center">
          <template #default>
            <el-input-number v-model="input" :min="1" step="1" style="width: 80%" />
          </template>
        </el-table-column>
      </el-table>
      <br />

      <!-- 子件明细 -->
      <span style="font-size: 0.7rem; font-weight: bold;">子件：</span>
      <el-table :data="detailList" style="width: 100%" border>
        <el-table-column label="操作" width="80px" align="center" fixed="left">
          <template #default="scope">
            <el-button link type="success" size="small" plain @click="addDetailRow(scope.$index)">
              <el-icon>
                <Plus />
              </el-icon>
            </el-button>
            <el-button link type="danger" size="small" plain @click="removeDetailRow(scope.$index)">
              <el-icon>
                <Minus />
              </el-icon>
            </el-button>
          </template>
        </el-table-column>

        <el-table-column prop="goodsCode" label="商品" width="140" align="center">
          <template #default>
            <el-input readonly size="small" placeholder="选择商品" style="width: 95%" />
          </template>
        </el-table-column>
        <el-table-column prop="goodsProp" label="规格" width="160" align="center">
          <template #default>
            <el-input size="small" style="width: 95%" disabled />
          </template>
        </el-table-column>
        <el-table-column prop="unit" label="单位" width="160" align="center">
          <template #default>
            <el-input readonly placeholder="" style="width: 80%" />
          </template>
        </el-table-column>
        <el-table-column prop="warehouse" label="仓库" width="160" align="center">
          <template #default>
            <el-input readonly placeholder="选择仓库" style="width: 80%" />
          </template>
        </el-table-column>
        <el-table-column prop="realStock" label="可用库存" width="160" align="center">
          <template #default>
            <el-input readonly placeholder="" style="width: 80%" />
          </template>
        </el-table-column>
        <el-table-column prop="goodsNumber" label="数量" width="160" align="center">
          <template #default>
            <el-input-number v-model="input" :min="1" step="1" style="width: 95%" />
          </template>
        </el-table-column>

        <el-table-column prop="cost" label="入库成本" width="160" align="center">
          <template #default="scope">
            <el-input readonly placeholder="选择仓库" style="width: 80%" @click="openWarehouseView(scope.row)" />
          </template>
        </el-table-column>
        <el-table-column label="备注" width="160" align="center">
          <template #default>
            <el-input placeholder="" style="width: 80%" />
          </template>
        </el-table-column>
      </el-table>
      <br />

      <!-- 备注 -->
      <el-input v-model="formData.remark" style="width: 100%" type="textarea" placeholder="暂无备注信息" />

      <!-- 操作日志 -->
      <div style="margin-bottom: 15px; text-align: right">
        <br />
        <el-button plain @click="router.push({ name: 'salesUnMerge' })">历史记录</el-button>
        <el-button plain>操作日志</el-button>
      </div>

      <!-- 仓库弹窗 -->
      <el-dialog v-model="warehouseVisible" title="仓库搜索列表" width="40%" style="height: auto" draggable>
        <WareHouse ref="warehouseRef" :info="{
          selection: true,
          no: false,
          name: true,
          code: true,
          status: false,
          op: false,
          outButton: true
        }" />
        <br /><br />
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import { defineProps, ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import WareHouse from '@/views/basic/WareHouse.vue'

const router = useRouter()
const props = defineProps(['code'])

// 表单数据
const formData = ref({
  code: '',
  mergeDate: '',
  staffNumber: 'STAFF-001',
  verifierNumber: '',
  status: '0',
  remark: ''
})

const mergeArr = ref([{}])
const detailList = ref([{}, {}, {}, {}])
const input = ref('')

// 仓库弹窗控制
const warehouseVisible = ref(false)
const warehouseRef = ref()

watch(warehouseVisible, (newVal) => {
  if (!newVal && warehouseRef.value) {
    input.value = warehouseRef.value.selectedArray.map(item => item.name).join(',')
    warehouseRef.value.clearSelected()
  }
})

// 初始化数据（根据 code 判断是否为编辑）
if (props.code) {
  // TODO: 根据 props.code 加载详情
  ElMessage.info(`加载拆卸单 ${props.code} 数据`)
} else {
  // 新增逻辑
  const now = new Date()
  formData.value.code = `DISASSEMBLE-${now.getFullYear()}${String(now.getMonth() + 1).padStart(2, '0')}${String(now.getDate()).padStart(2, '0')}001`
  formData.value.mergeDate = now.toISOString().slice(0, 10)
}

// 方法
const openWarehouseView = (row) => {
  console.log(row);
  warehouseVisible.value = true
}

const addDetailRow = (index) => {
  detailList.value.splice(index + 1, 0, {})
}

const removeDetailRow = (index) => {
  if (detailList.value.length > 1) {
    detailList.value.splice(index, 1)
  } else {
    ElMessage.warning('至少保留一行')
  }
}

const saveDraft = () => {
  ElMessage.success('草稿已保存')
}

const submitForApproval = () => {
  ElMessage.success('已提交审核')
}

const audit = () => {
  ElMessage.success('审核通过')
}

const unAudit = () => {
  ElMessage.success('已反审核')
}

const selectTemplate = () => {
  ElMessage.info('选择模板')
}

const saveAsTemplate = () => {
  ElMessage.success('已保存为模板')
}

const updateTemplate = () => {
  ElMessage.success('模板已更新')
}
</script>

<style></style>